/* eslint-disable prettier/prettier */
import { defineComponent, h, ref } from 'vue'
import { SearchOutlined, DeleteOutlined } from '@vicons/antd'
import {
  NButton,
  NSelect,
  NDataTable,
  NForm,
  NFormItem,
  NIcon,
  NCard,
  NSpace,
  NPagination,
  useMessage
} from 'naive-ui'
import {
  createHiveSimulateForm,
  getAssetsList,
  getQueryListData,
  refreshLineageData
} from '@/service/modules/integration-assets';
import styles from './index.module.scss'
import createHive from './create-hive'
import { RouterLink } from 'vue-router'

const assets = defineComponent({
  name: 'assets',
  components: {
    createHive
  },
  setup() {
    const assetsForm = ref({
      schemaName: undefined,
      tableName: undefined
    })

    const assetsSearch = () => {
      pagination.value.page = 1
      handleList()
    }

    const tableNameList = ref([])
    const schemaNameList = ref([])

    const createColumns = [
      {
        title: '表名',
        key: 'tableName',
        render(row: any) {
          return h(
            RouterLink,
            {
              to: {
                path: '/integration/assets/info',
                query: {
                  tableName: row.tableName,
                  schemaName: row.schemaName
                }
              }
            },
            {
              default: row.tableName
            }
          )
        }
      },
      { title: '库名', key: 'schemaName' },
      { title: '是否有任务', key: 'hasTask' },
      { title: '数据量', key: 'tableSize' },
      { title: '数据最后更新数据大小', key: 'tableLastModifySize' },
      { title: '数据最后更新时间', key: 'tableLastModifyTime' },
      { title: '质量监控个数', key: 'monitorCount' },
      { title: '技术负责人', key: 'tecOwnerUserName' },
      {
        title: '操作',
        key: 'actions',
        render (row: any) {
          return h(
            NButton,
            {
              size: 'small',
              onClick: () => {
                createHiveSimulateForm(row).then((res: any) => {
                  message.success(res.msg ? res.msg : '数据模拟成功')
                }).catch((err: any) => {
                  message.error(err.msg ? err.msg : '接口未知错误')
                })
              }
            },
            { default: () => '数据模拟生成' }
          )
        }
      }
    ]

    const assetsList = ref([])

    const pagination = ref({
      pageSize: 10,
      pageCount: 0,
      page: 1,
      showQuickJumper: true,
      pageSizes: [10, 30, 50],
      showSizePicker: true,
      loading: false,
      onUpdatePage: (page: number) => {
        pagination.value.page = page
        handleList()
      },
      onUpdatePageSize: (pageSize: number) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        handleList()
      }
    })

    const handleList = function () {
      pagination.value.loading = true
      getAssetsList(
        assetsForm.value,
        pagination.value.page,
        pagination.value.pageSize
      )
        .then((res: any) => {
          assetsList.value = res.data.records
          // @ts-ignore
          pagination.value.pageCount = Math.ceil(
            res.data.total / pagination.value.pageSize
          )
          pagination.value.loading = false
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
          pagination.value.loading = false
        })
    }

    const getQueryList = function () {
      getQueryListData()
        .then((res: any) => {
          const tempSchemaNameList: any[] = []
          const tempTableNameList: any[] = []
          res.data.schemaNameList.forEach((item: any) => {
            // @ts-ignore
            tempSchemaNameList.push({
              label: item,
              value: item
            })
          })
          res.data.tableNameList.forEach((item: any) => {
            // @ts-ignore
            tempTableNameList.push({
              label: item,
              value: item
            })
          })
          // @ts-ignore
          schemaNameList.value = tempSchemaNameList
          // @ts-ignore
          tableNameList.value = tempTableNameList
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
        })
    }

    const assetsClearSearch = function () {
      // @ts-ignore
      assetsForm.value.schemaName = ''
      // @ts-ignore
      assetsForm.value.tableName = ''
      handleList()
    }

    const refreshLineage = function () {
      refreshLineageData()
    }

    const createHiveClick = function () {
      showModal.value = true
    }

    handleList()
    getQueryList()

    const showModal = ref(false)

    const handleModel = function () {
      showModal.value = false
    }

    const message = useMessage()

    return {
      assetsForm,
      assetsSearch,
      schemaNameList,
      tableNameList,
      assetsList,
      columns: createColumns,
      pagination,
      handleList,
      getQueryList,
      assetsClearSearch,
      refreshLineage,
      createHiveClick,
      showModal,
      handleModel,
      message
    }
  },
  render() {
    return (
      <NSpace vertical>
        <NCard size='small'>
          <NForm inline model={this.assetsForm}>
            <NFormItem path='schemaName' style='width: 180px'>
              <NSelect
                v-model:value={this.assetsForm.schemaName}
                placeholder='请选择库名'
                options={this.schemaNameList}
              ></NSelect>
            </NFormItem>
            <NFormItem path='tableName' style='width: 180px'>
              <NSelect
                v-model:value={this.assetsForm.tableName}
                placeholder='请选择表名'
                options={this.tableNameList}
              ></NSelect>
            </NFormItem>
            <NFormItem>
              <NSpace>
                <NButton onClick={this.assetsSearch}>
                  <NIcon>
                    <SearchOutlined />
                  </NIcon>
                  查询
                </NButton>
                <NButton onClick={this.assetsClearSearch}>
                  <NIcon>
                    <DeleteOutlined />
                  </NIcon>
                  清空
                </NButton>
                {/*<NButton onClick={this.refreshLineage}>*/}
                {/*  <NIcon>*/}
                {/*    <FileAddOutlined />*/}
                {/*  </NIcon>*/}
                {/*  更新血缘*/}
                {/*</NButton>*/}
                <NButton onClick={this.createHiveClick}>新建Hive表</NButton>
              </NSpace>
            </NFormItem>
          </NForm>
        </NCard>
        <NCard size='small'>
          <NSpace vertical>
            <NDataTable
              columns={this.columns}
              data={this.assetsList}
              loading={this.pagination.loading}
            ></NDataTable>
            <NPagination
              class={styles['page-position']}
              display-order={['quick-jumper', 'pages', 'size-picker']}
              page-count={this.pagination.pageCount}
              page-size={this.pagination.pageSize}
              page-sizes={this.pagination.pageSizes}
              page={this.pagination.page}
              on-update:page={this.pagination.onUpdatePage}
              on-update:page-size={this.pagination.onUpdatePageSize}
              show-quick-jumper
              show-size-picker
            ></NPagination>
          </NSpace>
        </NCard>
        <createHive
          propModal={this.showModal}
          onCloseModal={this.handleModel}
          close-modal={this.handleModel}
          schemaNameList={this.schemaNameList}
        ></createHive>
      </NSpace>
    )
  }
})

export default assets
